import {getInterfaceInfoVoById, invokeInterfaceInfo} from '@/services/yuapi-backend/interfaceInfoController';
import { PageContainer } from '@ant-design/pro-components';
import {Badge, Button, Card, Checkbox, Descriptions, Divider, Form, Input, message} from 'antd';
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router';

/**
 * 主页
 * @constructor
 */
const Index: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<API.InterfaceInfo>();
  const [invokeRes, setInvokeRes] = useState<any>();
  const [invokeLoading, setInvokeLoading] = useState(false);
  // 使用useMatch钩子将当前URL与指定的路径模式/interface_info/:id进行匹配，
  // 并将匹配结果赋值给match变量
  const params = useParams();
  // 使用JSON.stringify将match变量的值转换为JSON字符串，并通过alert函数进行弹窗显示

  const loadData = async () => {
    if (!params.id) {
      message.error('接口不存在');
      return;
    }
    setLoading(true);
    try {
      const res = await getInterfaceInfoVoById({ id: Number(params.id) });
      setData(res.data);
    } catch (error: any) {
      message.error('请求失败，' + error.message);
    }
    setLoading(false);
  };

  useEffect(() => {
    loadData();
  }, []);

  const onFinish = async (values: any) => {
    if(!params.id){
      message.error('接口不存在');
      return;
    }
    setInvokeLoading(true);
    try {
      const res = await invokeInterfaceInfo({
        id: params.id,
        ...values
      })
      if (res.data){
        setInvokeRes(res.data);
        message.success('调用成功');
      }
    }catch (error:any){
      message.error('调用失败，' + error.message);
    }
    setInvokeLoading(false);
  };


  return (
    <PageContainer title="查看接口文档">
      {data ? (
        <Badge.Ribbon text={data.status === 0?'不可用':'可用'} color={data.status===0?'gray':'green'} placement='end'>
          <Descriptions title={data.name} column={1}>
            <Descriptions.Item label="接口状态">
              {data.status === 0 ? (
                <Badge status="default" text={'不可用'} />
              ) : (
                <Badge status="success" text={'可用'} />
              )}
            </Descriptions.Item>
            <Descriptions.Item label="描述">{data.description}</Descriptions.Item>
            <Descriptions.Item label="请求地址">{data.url}</Descriptions.Item>
            <Descriptions.Item label="请求方法">{data.method}</Descriptions.Item>
            <Descriptions.Item label="请求参数">{data.requestParams}</Descriptions.Item>
            <Descriptions.Item label="请求头">{data.requestHeader}</Descriptions.Item>
            <Descriptions.Item label="响应头">{data.responseHeader}</Descriptions.Item>
            <Descriptions.Item label="创建时间">{data.createTime}</Descriptions.Item>
            <Descriptions.Item label="更新时间">{data.updateTime}</Descriptions.Item>
          </Descriptions>
        </Badge.Ribbon>
      ) : (
        <> 接口不存在</>
      )}
      <Divider/>
      <Card title={'在线测试'}>
        <Form
          layout={'vertical'}
          name="basic"
          onFinish={onFinish}
          onFinishFailed={()=> {}}
          autoComplete="off"
        >
          <Form.Item
            label="请求参数"
            name="requestParams"
          >
            <Input.TextArea />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              调用
            </Button>
          </Form.Item>
        </Form>

      </Card>
      <Divider/>
      <Card title={'调用结果'}>
        {invokeRes}
      </Card>
    </PageContainer>
  );
};

export default Index;
